<template>
  <a-form-item
    :class="[props.component.customClass]"
    :content-class="props.component.contentClass"
    :disabled="props.component.disabled"
    :extra="props.component.extra"
    :feedback="props.component.feedback"
    :field="props.customField ?? props.component.dataIndex"
    :help="props.component.help"
    :hide-label="props.component.hideLabel"
    :label="props.component.title"
    :label-col-flex="props.component.labelColFlex ?? 'auto'"
    :label-col-style="{ width: props.component.labelWidth ? props.component.labelWidth : options.labelWidth || '100px' }"
    :required="props.component.required"
    :rules="props.component.rules"
    :show-colon="props.component.showColon"
    :tooltip="props.component.tooltip"
    :validate-status="props.component.validateStatus"
    :validate-trigger="props.component.validateTrigger ?? 'blur'"
  >
    <slot />
  </a-form-item>
</template>
<script setup>
import { inject } from "vue";

const options = inject("options");
const props = defineProps({
  component: Object,
  customField: { type: String, default: null }
});
</script>
